import React, { useState } from "react";
import { EditOutlined } from "@ant-design/icons";
import {
  Form,
  Input,
  Button,
  Drawer,
  Select,
  Radio,
} from "antd";

function EditComponent(props) {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const { item, getUpdate } = props;

  const showDrawer = () => {
    setVisible(true);
  };

  const closeDrawer = () => {
    setVisible(false);
  };

  const update = (id, detail) => {
    getUpdate(id, detail);
    setVisible(false);
  };

  return (
    <>
      <EditOutlined key="edit" onClick={showDrawer} />
      <Drawer
        title="编辑网络组件"
        placement="right"
        onClose={closeDrawer}
        visible={visible}
        footer={[
          <Button onClick={closeDrawer}>关闭</Button>,
          <Button
            type="primary"
            style={{ marginLeft: 10 }}
            onClick={form.submit}
          >
            保存
          </Button>,
        ]}
        footerStyle={{
          textAlign: "right",
        }}
      >
        <Form
          form={form}
          name="edit-component"
          onFinish={(values) => update(item.id, values)}
          initialValues={{
            name: item.name,
            type: item.type,
            shareCluster: item.shareCluster,
          }}
        >
          <Form.Item
            label="组件名称"
            name="name"
            rules={[{ required: true, message: "请输入组件名称" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="组件类型"
            name="type"
            rules={[{ required: true, message: "请选择组件类型" }]}
          >
            <Select disabled={true}>
              <Select.Option value={item.type}>
                {item.typeObject.name}
              </Select.Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="集群"
            name="shareCluster"
            rules={[{ required: true, message: "请选择集群类型" }]}
          >
            <Radio.Group style={{ marginLeft: 28 }}>
              <Radio value={true}>共享配置</Radio>
              <Radio value={false}>独立配置</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Drawer>
    </>
  );
}

export default EditComponent;
